<template>
    <div>
        <Card >
            <Button
                v-hasC="{
                    name: '-v1-marketing-construct-update-construct',
                    flag: '/v1/marketing/construct/update-construct',
                }"
                type="primary"
                @click="handleAllocation(-1)"
            >新增</Button
            >
            <Table
                highlight-row
                :columns="columns"
                :data="data"
                class="ivu-mt-16"
                :loading="loading"
            >
                <template slot-scope="{ row }" slot="status">
                    <Badge
                        v-if="row.status === '1'"
                        status="success"
                        text="正常"
                    ></Badge>
                    <Badge
                        v-if="row.status === '0'"
                        status="error"
                        text="停用"
                    ></Badge>
                </template>
                <template slot="list" slot-scope="{ row }">
                    <tag v-for="(item,index) in row.source_channel_name" :value="index" :key="index">{{
                        item
                    }}</tag>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a
                        v-hasC="{
                            name: '-v1-marketing-construct-update-construct2',
                            flag: '/v1/marketing/construct/update-construct',
                        }"
                        @click="handleAllocation(row)"
                    >编辑</a
                    >
                    <Divider
                        v-hasCC="[
                            {
                                name: '-v1-marketing-construct-update-construct2',
                                flag: '/v1/marketing/construct/update-construct',
                            },
                            {
                                name: '-v1-marketing-construct-delete-construct',
                                flag: '/v1/marketing/construct/delete-construct',
                            },
                        ]"
                        type="vertical"
                    ></Divider>
                    <a
                        v-hasC="{
                            name: '-v1-marketing-construct-delete-construct',
                            flag: '/v1/marketing/construct/delete-construct',
                        }"
                        @click="deleteTag(row)"
                    >删除</a
                    >
                </template>
            </Table>
            <div class="ivu-mt" style="display: flex; justify-content: center;">
                <Page
                    show-total
                    show-elevator
                    show-sizer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="formSize"
                    @on-page-size-change="formChangePage"
                ></Page>
            </div>
        </Card>
        <Modal
            v-model="modal"
            :title="edit ? '新增' : '编辑'"
            @on-cancel="handleDrawerCancel('formItem')"
        >
            <Form
                :model="formItem"
                :label-width="100"
                ref="formItem"
                :rules="createRules"
            >
                <FormItem label="名称" prop="name">
                    <Input
                        v-model.trim="formItem.name"
                        placeholder="请输入名称"
                    ></Input>
                </FormItem>
                <FormItem label="关联渠道" prop="source_channel_id">
                    <Select v-model="formItem.source_channel_id" multiple>
                        <OptionGroup :label="item.label" v-for="item in channelList" :key="item.value">
                            <Option v-for="it in item.children" :value="it.value" :key="it.value">{{ it.label }}</Option>
                        </OptionGroup>
                        <!-- <Option
                            :value="item.value"
                            v-for="item in channelList"
                            :key="item.value"
                        >{{ item.label }}</Option
                        > -->
                    </Select>
                </FormItem>
                <FormItem label="排序">
                    <Input
                        v-width="100"
                        v-model.trim="formItem.sort"
                        placeholder=""
                        type="number"
                        @on-blur="sortNum"
                    ></Input>
                </FormItem>
                <FormItem label="状态">
                    <i-switch v-model="formItem.status">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel('formItem')">取消</Button>
                <Button
                    type="primary"
                    :loading="remarksloading"
                    @click="handleSubmit('formItem', 1)"
                >确定</Button
                >
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        constructList,
        updateConstruct,
        marketingconsumegetsourcechannellist,
        deleteConstruct,
    } from '@api/hqapi/networkMarketing.js';
    export default {
        name: 'diagnosis',
        data() {
            return {
                cityshow: true,
                modal: false,
                loadingcity: false,
                formItem: {
                    id: 0,
                    name: '',
                    status: '',
                    source_channel_id: [],
                    sort: '',
                },
                projectlist: [],
                channelList: [],
                columns: [
                    { title: '名称', key: 'name', minWidth: 108 },
                    { title: '关联渠道', slot: 'list', minWidth: 150 },
                    { title: '排序', key: 'sort', minWidth: 150 },
                    { title: '状态', slot: 'status', minWidth: 90 },
                    { title: '操作', slot: 'operation', width: 118 },
                ],
                data: [],
                loading: false,
                edit: true,
                remarksloading: false,
                createRules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    source_channel_id: [
                        {
                            required: true,
                            message: '请选择关联渠道',
                            trigger: 'change',
                            type: 'array'
                        },
                    ],
                }, // 模态框验证规则
                section_list: [],
                params: { page: 1, pageSize: 10 },
                total: 0,
                pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
            };
        },
        /* 创建完成能访问this实例 */
        mounted() {
            this.initial();
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial(e) {
           
                if(e == 'name2'){
                    marketingconsumegetsourcechannellist().then(res => {
                        this.channelList = res;
                    });
                    this.askData();
                }
            
            },
            /* @函数功能: 请求数据 */
            askData() {
                this.loading = true;
                constructList(this.params).then(res => {
                    this.data = res.list;
                    this.total = res.total;
                    this.loading = false;
                // console.log(res,'res')
                });
            },
            /* @函数功能: 分页 */
            formSize(e) {
                this.params.page = e;
                this.askData();
            },
            /* @函数功能: 每页数量 */
            formChangePage(e) {
                this.params.pageSize = e;
                this.askData();
            },
            sortNum() {
                if(this.formItem.sort < 0) {
                    this.formItem.sort = 0;
                }
            },
            /* 打开模态框 */
            handleAllocation(row) {
                if(row === -1) {
                    this.edit = true;
                    this.formItem = {
                        id: 0,
                        name: '',
                        status: true,
                        source_channel_id: [],
                        sort: '',
                    };
                }else {
                    this.edit = false;
                    this.formItem = {
                        id: row.id,
                        name: row.name,
                        status: +row.status === 1,
                        source_channel_id: row.source_channel_id ? row.source_channel_id.split(',') : [],
                        sort: row.sort,
                    };
                }
                this.modal = true;
            },
            /* 取消 */
            handleDrawerCancel(name) {
                this.$refs[name].resetFields();
                this.modal = false;
                this.setupModal = false;
                this.formItem = {
                    id: 0,
                    name: '',
                    status: true,
                    section_id: '',
                    sort: '',
                };
            },
            /* 提交 */
            handleSubmit(name, num) {
                this.$refs[name].validate(valid => {
                    if(valid) {
                        this.remarksloading = true;
                        let config = {
                            id: this.formItem.id,
                            name: this.formItem.name,
                            status: this.formItem.status ? 1 : 0,
                            source_channel_id: this.formItem.source_channel_id.join(','),
                            sort: Number(this.formItem.sort),
                        };
                        if(!this.edit) {
                            updateConstruct(config).then(() => {
                                this.$Message.success('编辑成功');
                                this.askData();
                                this.modal = false;
                                this.remarksloading = false;
                            }).catch(() => {
                                this.remarksloading = false;
                            });
                        }else {
                            updateConstruct(config).then(() => {
                                this.$Message.success('新增成功');
                                this.askData();
                                this.modal = false;
                                this.remarksloading = false;
                            }).catch(() => {
                                this.remarksloading = false;
                            });
                        }
                    
                    }
                });
            },
            /* 删除 */
            deleteTag(row) {
                this.$Modal.confirm({
                    title: '删除确认',
                    content:
                        '是否确认删除',
                    loading: true,
                    onOk: () => {
                        deleteConstruct({ id: row.id }).then(res => {
                            this.$Modal.remove();
                            this.$Message.success('删除成功');
                            this.askData();
                        }).catch(() => {
                        });
                    },
                });
            },
        },
    };
</script>

<style scoped></style>
